<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/public">

<head>
    <link th:href="@{/static/js/fancybox/jquery.fancybox.min.css}" rel="stylesheet">
    <link th:href="@{/static/js/summernote/summernote.css}" rel="stylesheet">

</head>
<div  layout:fragment="content">
    <div class="row mt-10">
        <div class="col-xs-12 col-md-9 main">
            <div class="widget-question">
                <h4 class="title">
                    <span th:if="${question.price>0}" class="text-gold">
                        <i class="fa fa-database"></i> <th:block th:text="${question.price}"></th:block>
                        </span>
                    <th:block th:text="${question.title}"></th:block>
                </h4>
                <ul th:if="${question.tags}" class="taglist-inline">
                    <li th:each="tag:${question.tags}" class="tagPopup"><a class="tag" th:href="|/topic/${tag.id}|" th:text="${tag.name}"></a></li>
                </ul>
                <div class="description mt-10">
                    <div class="text-fmt " th:utext="${question.description}">
                    </div>

                    <div class="post-opt mt-10">
                        <ul class="list-inline">
                            <li><a class="comments "  data-toggle="collapse"   th:href="|#comments-question-${question.id}|" aria-expanded="false" th:attr="aria-controls='comment-'+${question.id}" ><i class="fa fa-comment-o"></i> <th:block th:text="${#sets.size(question.comments)}"></th:block> 条评论</a></li>
                            <th:block th:if="${currentUser!=null}">
                            <li th:if="${(question.status!=2 && currentUser==question.user) || currentUser.admin==true}"><a th:href="|/question/edit/${question.id}|" class="edit" data-toggle="tooltip" data-placement="right" title="" data-original-title="补充细节，以得到更准确的答案"><i class="fa fa-edit"></i> 编辑</a></li>
                            <li th:if="${question.status!=2 && currentUser==question.user}"><a href="#" data-toggle="modal" data-target="#appendReward"  ><i class="fa fa-database"></i> 追加悬赏</a></li>
                            </th:block>
                            <li th:if="${question.status!=2}"><a href="#" data-toggle="modal" data-target="#inviteAnswer"><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 邀请回答</a></li>
                        </ul>
                    </div>
                    <div th:replace="themes/default/comment/collapse::collapse('question',${question},false)"></div>

                    <div class="mb-10" th:if="!${#strings.isEmpty(GlobalSetting.website.shareCode)}" th:utext="${GlobalSetting.website.shareCode}">
                    </div>
                </div>

                <div th:if="${question.status == 2}" class="best-answer mt-10">
                    <div class="trophy-title">
                        <h3>
                            <i class="fa fa-trophy"></i> 最佳答案
                            <span class="pull-right text-muted adopt_time" th:text=" ${#dates.format(question.bestAnswer.createdAt,GlobalSetting.time.dateFormat+' '+GlobalSetting.time.timeFormat)}"></span>
                        </h3>
                    </div>
                    <div class="text-fmt" th:utext="${question.bestAnswer.content}">

                    </div>
                    <div class="options clearfix mt-10">
                        <ul class="list-inline pull-right">
                            <li class="pull-right">
                                <a class="comments mr-10" data-toggle="collapse" th:href="|#comments-answer-${question.bestAnswer.id}|" aria-expanded="false" th:attr="aria-controls=|comment-${question.bestAnswer.id}|"  th:text="|${#sets.size(question.bestAnswer.comments)} 条评论|"><i class="fa fa-comment-o"></i></a>
                                <button class="btn btn-default btn-sm btn-support" th:attr="data-source_id=|${question.bestAnswer.id}|,data-support_num=|${#sets.size(question.bestAnswer.supports)}|"  data-source_type="answer"><i class="fa fa-thumbs-o-up" ></i> <th:block th:text="${#sets.size(question.bestAnswer.supports)}"></th:block></button>
                                <button  th:if="${question.bestAnswer.user.detail.qrcode}" class="btn btn-warning btn-sm" data-toggle="modal" th:attr="data-target=|#payment-qrcode-modal-answer-${question.bestAnswer.id}|" ><i class="fa fa-heart-o" aria-hidden="true"></i> 打赏</button>
                            </li>
                        </ul>
                    </div>
                    <div th:replace="themes/default/comment/collapse::collapse('answer',${question.bestAnswer},false)"></div>
                    <div th:if="${question.bestAnswer.user.detail.qrcode}" th:replace="themes/default/layout/qrcode_pament::qrcode_pament('answer',${question.bestAnswer},'如果觉得我的回答对您有用，请随意打赏。你的支持将鼓励我继续创作！')"></div>
                    <div class="media user-info border-top">
                        <div class="media-left">
                            <a th:href="|/space/${question.bestAnswer.user.id}|" target="_blank">
                                <img class="avatar-40 hidden-xs"  th:src="${question.bestAnswer.user.avatar}" th:alt="${question.bestAnswer.user.nickname}"></a>
                            </a>
                        </div>
                        <div class="media-body">

                            <div class="media-heading">
                                <strong><a th:href="|/space/${question.bestAnswer.user.id}|" class="mr5" th:text="${question.bestAnswer.user.nickname}"></a> <span class="text-gold"> <i th:if="${question.bestAnswer.user.authentication!=null && question.bestAnswer.user.authentication?.status==1}" class="fa fa-graduation-cap" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="" data-original-title="已通过行家认证"></i></span></strong>
                                <span th:if="${question.bestAnswer.user.detail.title}" class="text-muted" th:text="| - ${question.bestAnswer.user.detail.title}|"></span>
                            </div>

                            <div class="content">
                                <span class="answer-time text-muted hidden-xs">
                                    <th:block th:if="${question.bestAnswer.user.authentication!=null && question.bestAnswer.user.authentication?.status==1}" th:text="|擅长：${question.bestAnswer.user.skill}|"></th:block>
                                    <th:block th:text="| 采纳率 ${question.bestAnswer.user.data.adoptPercent}%    回答于 ${#dates.format(question.bestAnswer.createdAt,GlobalSetting.time.dateFormat+' '+GlobalSetting.time.timeFormat)}|" ></th:block>
                                </span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="widget-answers mt-15">
                <div class="btn-group pull-right" role="group" >
                    <a href="?sort=createdAtDesc" id="sortby-created" class="btn btn-default btn-xs" th:classappend="${#request.getParameter('sort') == null || #request.getParameter('sort') == 'createdAtDesc'}?'active'">最新回答</a>
                    <a href="?sort=hot" class="btn btn-default btn-xs" th:classappend="${#request.getParameter('sort') == 'hot'}?'active'" >热门回答</a>
                    <a href="?sort=createdAtAsc" id="sortby-created" class="btn btn-default btn-xs" th:classappend="${#request.getParameter('sort') == 'createdAtAsc'}?'active'">最早回答</a>
                </div>

                <h2 class="h4 post-title">
                    <th:block th:text="${question.status==2}?'其他 ':''"></th:block>
                    <th:block th:text="|${#sets.size(question.answers)} 个回答|"></th:block>
                </h2>

                <div th:each="answer:${answerList}" class="media">
                    <div class="media-left">
                        <a th:href="|/space/${answer.user.id}|" class="avatar-link user-card" target="_blank">
                            <img class="avatar-40 hidden-xs"  th:src="${answer.user.avatar}" th:alt="${answer.user.nickname}"></a>
                        </a>
                    </div>
                    <div class="media-body">
                        <div class="media-heading">
                            <strong>
                                <a th:href="|/space/${answer.user.id}|" class="mr-5 user-card" th:text="${answer.user.nickname}"></a><span class="text-gold" th:if="${answer.user.authentication!=null && answer.user.authentication?.status==1}"><i class="fa fa-graduation-cap" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="" data-original-title="已通过行家认证"></i>
                                </span>
                            </strong>
                            <span class="text-muted" th:if="${!#strings.isEmpty(answer.user.detail.title)}" th:text="| - ${answer.user.detail.title}|" ></span>
                            <span class="answer-time text-muted hidden-xs" th:text="${#dates.format(answer.createdAt,GlobalSetting.time.dateFormat+' '+GlobalSetting.time.timeFormat)}"></span>
                        </div>
                        <div class="content">
                            <span class="text-muted" th:if="${answer.user.authentication!=null && answer.user.authentication?.status==1}" th:text="|擅长：${answer.user.authentication.skill}|"></span>
                            <p th:utext="${answer.content}"></p>
                        </div>
                        <div class="media-footer">
                            <ul class="list-inline mb-20">
                                <li><a class="comments"  data-toggle="collapse"  th:href="|#comments-answer-${answer.id}|" aria-expanded="false"  th:attr="aria-controls=|comment-${answer.id}|" th:text="| ${#sets.size(answer.comments)} 条评论|"><i class="fa fa-comment-o"></i></a></li>
                                <th:block th:if="${currentUser!=null}">
                                <th:block th:if="${question.status!=2 && (currentUser==answer.user || currentUser.admin==true)}">
                                <li><a th:href="|/answer/edit/${answer.id}|" data-toggle="tooltip" data-placement="right" title="" data-original-title="继续完善回答内容"><i class="fa fa-edit"></i> 编辑</a></li>
                                </th:block>
                                <th:block th:if="${question.status!=2 && (currentUser==question.user || currentUser.admin==true)}">
                                <li><a href="#" class="adopt-answer" data-toggle="modal" data-target="#adoptAnswer"  th:attr="data-answer_content=|${answer.content}|,data-answer_id=|${answer.id}|"><i class="fa fa-check-square-o"></i> 采纳</a></li>
                                </th:block>
                                <li th:if="${answer.user.detail.qrcode}"><a href="#" data-toggle="modal" th:attr="data-target=|#payment-qrcode-modal-answer-${answer.id}|" ><i class="fa fa-heart-o" aria-hidden="true"></i> 打赏</a></li>
                                </th:block>
                                <li class="pull-right">
                                    <button class="btn btn-default btn-sm btn-support" th:attr="data-source_id=|${answer.id}|,data-source_type=answer,data-support_num=|${#sets.size(answer.supports)}|" th:text="${#sets.size(answer.supports)}"><i class="fa fa-thumbs-o-up"></i></button>
                                </li>
                            </ul>
                        </div>
                        <div th:replace="themes/default/comment/collapse::collapse('answer',${answer},false)"></div>
                        <div th:if="${answer.user.detail.qrcode}" th:replace="themes/default/layout/qrcode_pament::qrcode_pament('answer',${answer},'如果觉得我的回答对您有用，请随意打赏。你的支持将鼓励我继续创作！')"></div>
                    </div>
                </div>
                <div class="text-center">
                    <!--{!! str_replace('/?', '?', $answers->render()) !!}-->
                </div>

            </div>
            <div th:if="${question.status!=2}" class="widget-answer-form mt-15">

                <div th:if="!${currentUser}" class="answer_login_tips mb-20">
                    您需要登录后才可以回答问题，<a href="javascript:void(0)" onclick="check_login()" rel="nofollow">登录</a>&nbsp;或者&nbsp;<a rel="nofollow" href="{{ route('auth.user.register') }}">注册</a>
                </div>
                <form th:object="${answer}"  th:if="${currentUser!=null  && !question.answered}" name="answerForm" id="answer_form" th:action="|/question/${question.id}|" method="post" class="editor-wrap">
                    <div class="form-group" th:classappend="${#fields.hasErrors('${answer.content}')}?'has-error'">
                        <div id="answer_editor"><th:block th:utext="${answer?.content}"></th:block></div>
                        <p class="help-block" th:if="${#fields.hasErrors('${answer.content}')}" th:text="${#fields.errors('${answer.content}')[0]}"></p>
                    </div>

                    <div class="row mt-20">
                        <div class="col-xs-12 col-md-10">
                            <ul class="list-inline">
                                <li class="checkbox"> <label><input type="checkbox" id="attendTo" name="follow" value="true" th:checked="${(question.attented && answer.follow==true) || answer.follow==null}" />关注该问题</label></li>
                                <li th:if="${GlobalSetting.irrigation.codeCreateQuestion}" class="pull-right">
                                    <div class="form-group" th:classappend="${validateCodeError}">
                                        <input type="text" class="form-control" name="captcha" required="" placeholder="验证码" />
                                        <span th:if="${validateCodeError}" th:text="${validateCodeError}" class="help-block"></span>
                                        <div class="mt-10"><a href="javascript:void(0);" id="reloadCaptcha"><img src=""></a></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col-xs-12 col-md-2">
                            <input type="hidden" id="answer_editor_content"  name="content" th:value="${answer?.content}"  />
                            <button type="submit" class="btn btn-primary pull-right">提交回答</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>

        <div class="col-xs-12 col-md-3 side">
            <div class="widget-box">
                <ul class="widget-action list-unstyled">
                    <li>
                        <button th:if="${question.attented}" type="button" id="follow-button" class="btn btn-success btn-sm active"  th:attr="data-source_type=question,data-source_id=|${question.id}|"   data-show_num="true" data-toggle="tooltip" data-placement="right" title="" data-original-title="关注后将获得更新提醒">已关注</button>
                        <button th:if="${!question.attented}" type="button" id="follow-button" class="btn btn-success btn-sm"  th:attr="data-source_type=question,data-source_id=|${question.id}|"   data-show_num="true"  data-toggle="tooltip" data-placement="right" title="" data-original-title="关注后将获得更新提醒">关注</button>
                        <strong id="follower-num" th:text="${#sets.size(question.attentions)}"></strong> 关注
                    </li>
                    <li>
                        <button th:if="${question.collected}" id="collect-button" class="btn btn-default btn-sm" data-loading-text="加载中..." th:attr="data-source_type=question,data-source_id=|${question.id}|" > 已收藏</button>
                        <button th:if="${!question.collected}" id="collect-button" class="btn btn-default btn-sm" th:attr="data-source_type=question,data-source_id=|${question.id}|" > 收藏</button>
                        <strong id="collection-num" th:text="${#sets.size(question.collections)}">{{ $question->collections }}</strong> 收藏，<strong class="no-stress" th:text="${question.views}"></strong> 浏览
                    </li>
                    <li>
                        <i class="fa fa-clock-o"></i>
                        <a th:if="!${question.hide}" th:href="|/space/${question.user.id}|" target="_blank" th:text="${question.user.nickname}"></a>
                        提出于 <th:block th:text="${#dates.format(question.createdAt,'yyyy-MM-dd hh:mm:s')}"></th:block></li>
                </ul>
            </div>
            <div class="widget-box">
                <h2 class="h4 widget-box__title">相似问题</h2>
                <ul class="widget-links list-unstyled list-text">
                    <li th:each="relatedQuestion:${relatedQuestions}" class="widget-links-item">
                        <a title="{{ $relatedQuestion->title }}" href="{{ route('ask.question.detail',['question_id'=>$relatedQuestion->id]) }}">{{ $relatedQuestion->title }}</a>
                        <small class="text-muted">{{ $relatedQuestion->answers }} 回答</small>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div th:if="${currentUser!=null}" class="modal" id="appendReward" tabindex="-1" role="dialog" aria-labelledby="appendRewardLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="appendModalLabel">追加悬赏</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success" role="alert" id="rewardAlert">
                        <i class="fa fa-exclamation-circle"></i> 提高悬赏，以提高问题的关注度！
                    </div>

                    <form class="form-inline" id="rewardForm" action="{{ route('ask.question.appendReward',['id'=>$question->id]) }}" method="post">
                        <input type="hidden"  name="_token" value="{{ csrf_token() }}">
                        <div class="form-group">
                            <label for="reward">追加</label>
                            <select class="form-control" name="coins" id="question_coins">
                                <option value="3" selected>3</option><option value="5">5</option><option value="10">10</option><option value="15">15</option><option value="30">30</option><option value="50">50</option><option value="80">80</option><option value="100">100</option>
                            </select> 个金币
                        </div>
                        <div class="form-group">
                            （您目前共有 <span class="text-gold" th:text="${currentUser.data.coin}"></span> 个金币）
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="appendRewardSubmit">确认追加</button>
                </div>
            </div>
        </div>
    </div>
    <div th:if="${currentUser!=null}" class="modal" id="adoptAnswer" tabindex="-1" role="dialog" aria-labelledby="adoptAnswerLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="adoptModalLabel">采纳回答</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning" role="alert" id="adoptAnswerAlert">
                        <i class="fa fa-exclamation-circle"></i> 确认采纳该回答为最佳答案？
                    </div>
                    <blockquote id="answer_quote"></blockquote>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="adoptAnswerSubmit">采纳该回答</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="inviteAnswer" tabindex="-1" role="dialog" aria-labelledby="inviteAnswerLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="appendModalLabel">邀请回答</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success" role="alert" id="rewardAlert">
                        <i class="fa fa-exclamation-circle"></i><th:block th:text="| 不知道答案？你还可以邀请他人进行解答，每天可以邀请${GlobalSetting.irrigation.userInviteLimit}次。|"></th:block>
                    </div>
                    <form class="invite-popup" id="inviteEmailForm"  th:action="|${#request.getRequestURI()}/inviteEmail|" method="get">
                        <div style="position: relative;">
                            <ul class="nav nav-tabs">
                                <li class="active"><a data-by="username" href="#by-username" data-toggle="tab">站内邀请</a></li>
                                <li><a data-by="email" href="#by-email" data-toggle="tab">Email 邀请</a></li>
                            </ul>
                            <div class="tab-content invite-tab-content mt-10">
                                <div class="tab-pane active" id="by-username" data-type="username">
                                    <div class="search-user" id="questionSlug">
                                        <input id="invite_word" class="text-28 form-control" type="text" name="word" autocomplete="off" placeholder="搜索你要邀请的人">
                                    </div>
                                    <div class="help-block" id="questionInviteUsers"></div>
                                    <div class="invite-question-modal">
                                        <div class="row invite-question-list" id="invite_user_list">
                                            <div class="text-center" id="invite_loading">
                                                <i class="fa fa-spinner fa-spin"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="by-email" data-type="email">
                                    <div class="mb-10">
                                        <input class="text-28 form-control" type="email" name="sendTo" placeholder="Email 地址">
                                    </div>
                                    <p><textarea class="textarea-13 form-control" name="message" rows="5" th:text="|我在 ${GlobalSetting.website.name} 上遇到了问题「${question.title}」 → ${#request.getRequestURL()}，希望您能帮我解答 |"></textarea></p>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer" style="display:none;">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary invite-email-btn">确认</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/static/js/summernote/summernote.min.js}"></script>
    <script th:src="@{/static/js/summernote/lang/summernote-zh-CN.min.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        var invitation_timer = null;
        var question_id  = [[${question.id}]];
        // alert(is_login);
        $(document).ready(function() {
            if(is_login) {
                /*问题悬赏*/
                $("#appendRewardSubmit").click(function () {
                    var user_total_conis = '{{ Auth()->user()->userData->coins }}';
                    var reward = $("#question_coins").val();

                    if (reward > parseInt(user_total_conis)) {
                        $("#rewardAlert").attr('class', 'alert alert-warning');
                        $("#rewardAlert").html('金币数不能大于' + user_total_conis);
                    } else {
                        $("#rewardAlert").empty();
                        $("#rewardAlert").attr('class', '');
                        $("#rewardForm").submit();
                    }
                });

                /*回答编辑器初始化*/
                $('#answer_editor').summernote({
                    lang: 'zh-CN',
                    height: 160,
                    placeholder:'撰写答案',
                    toolbar: [ ['common', ['style','bold','ol','link','picture','clear','fullscreen']] ],
                    callbacks: {
                        onChange:function (contents, $editable) {
                            var code = $(this).summernote("code");
                            $("#answer_editor_content").val(code);
                        },
                        onImageUpload:function(files) {
                            upload_editor_image(files[0],'answer_editor');
                        }
                    }
                 });

                // //关闭复选框事件
                // $('#attendTo').click(function () {
                //     alert($(this).val());
                //     if($(this).attr("checked")){
                //         $(this).val('false');
                //     }else{
                //         $(this).val('true');
                //     }
                //     alert($(this).val());
                //
                // });
            }

            /*评论提交*/
            $(".comment-btn").click(function(){
                var source_id = $(this).data('source_id');
                var source_type = $(this).data('source_type');
                var to_user_id = $(this).data('to_user_id');
                var to_comment_id = $(this).data('to_comment_id');
                var token = $(this).data('token');
                var content = $("#comment-"+source_type+"-content-"+source_id).val();
                add_comment(token,source_type,source_id,content,to_user_id,to_comment_id);
                $("#comment-content-"+source_id+"").val('');
            });


            $(".widget-comments").on('show.bs.collapse', function () {
                load_comments($(this).data('source_type'),$(this).data('source_id'));
            });

            $(".widget-comments").on('hide.bs.collapse', function () {
                clear_comments($(this).data('source_type'),$(this).data('source_id'));
            });

            /*收藏问题或文章*/
            $("#collect-button").click(function(){
                $("#collect-button").button('loading');
                var source_type = $(this).data('source_type');
                var source_id = $(this).data('source_id');
                var collection_num = $("#collection-num").html();
                $.get('/collect/'+source_type+'/'+source_id,function(msg){
                    $("#collect-button").removeClass('disabled');
                    $("#collect-button").removeAttr('disabled');
                    if(msg=='collected'){
                        $("#collect-button").html('已收藏');
                        $("#collection-num").html(parseInt(collection_num)+1);
                    }else{
                        $("#collect-button").html('收藏');
                        $("#collection-num").html(parseInt(collection_num)-1);
                    }
                });
            });

            /*采纳回答为最佳答案*/
            $(".adopt-answer").click(function(){
                var answer_id = $(this).data('answer_id');
                $("#adoptAnswerSubmit").attr('data-answer_id',answer_id);
                $("#answer_quote").html($(this).data('answer_content'));
            });

            $("#adoptAnswerSubmit").click(function(){
                document.location = "/answer/adopt/"+$(this).data('answer_id');
            });

            /*邀请回答模块逻辑处理*/
            /*私信模块处理*/

            $('#inviteAnswer').on('show.bs.modal', function (event) {

                var button = $(event.relatedTarget);
                var modal = $(this);
                loadInviteUsers(question_id,'');
                loadQuestionInvitedUsers(question_id,'part');

            });


            $("#invite_word").on("keydown",function(){
                if(invitation_timer){
                    clearTimeout(invitation_timer);
                }
                invitation_timer = setTimeout(function() {
                    var word = $("#invite_word").val();
                    console.log(word);
                    loadInviteUsers(question_id,word);
                }, 500);
            });

            $(".invite-question-list").on("click",".invite-question-item-btn",function(){
                var invite_btn = $(this);
                var question_id = invite_btn.data('question_id');
                var user_id = invite_btn.data('user_id');

                $.ajax({
                    type: "get",
                    url:"/question/"+question_id+"/inviteUser",
                    data:{userId:user_id},
                    success: function(data){
                        if(data.code != 0){
                            if(data.code == 1001){
                                alert(data.message);
                                check_login()
                            }else{
                                alert(data.message);
                            }
                            return false;
                        }
                        invite_btn.html('已邀请');
                        invite_btn.attr("class","btn btn-default btn-xs invite-question-item-btn disabled");
                        loadQuestionInvitedUsers(question_id,'part');
                    },
                    error: function(data){
                        console.log(data);
                    }
                });
            });

            $("#inviteAnswer").on("click","#showAllInvitedUsers",function(){
                loadQuestionInvitedUsers(question_id,'all');
            });

            /*tag切换*/
            $('#inviteAnswer a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var tabBy = $(this).data("by");
                if( tabBy == 'email' ){
                    $("#inviteAnswer .modal-footer").show();
                }else{
                    $("#inviteAnswer .modal-footer").hide();
                }

            });

            /*邀请邮箱回答*/
            $("#inviteAnswer .invite-email-btn").click(function(){

                var formData = $("#inviteEmailForm").serialize();
                $.ajax({
                    type: "post",
                    url: "/question/"+question_id+"/inviteEmail",
                    data:formData,
                    success: function(data){
                        if(data.code == 1001){
                            alert(data.message);
                            check_login()
                        }

                        if(data.code!=0){
                            alert(data.message);
                        }else{
                            alert("邀请成功，邀请邮件已发送！");
                            $("#inviteAnswer").modal("hide");
                        }


                    },
                    error: function(data){
                        console.log(data);
                        alert("操作出错，请稍后再试");
                        $("#inviteAnswer").modal("hide");
                    }
                });
            });


        });


        /**
         * @param questionId
         * @param word
         */
        function loadInviteUsers(questionId,word){
            $.ajax({
                type: "get",
                url: "/ajax/loadInviteUsers",
                data:{questionId:questionId,word:word},
                success: function(data){
                    console.log(data);
                    var inviteItemHtml = '';
                    if(data.code != 0){
                        inviteItemHtml = '<div class="text-center" id="invite_loading"><p>暂无数据</p></div>';
                    }else{
                        $.each(data.message,function(i,item){
                            inviteItemHtml+= '<div class="col-md-12 invite-question-item">' +
                                '<img src="'+item.avatar+'" />'+
                                '<div class="invite-question-user-info">'+
                                '<a class="invite-question-user-name" target="_blank" href="'+item.url+'">'+item.username+'</a>'+
                                '<span class="invite-question-user-desc">'+item.tagName+' 标签下有 '+item.tagAnswers+' 个回答</span>'+
                                '</div>';
                            if(item.isInvited>0){
                                inviteItemHtml += '<button type="button" class="btn btn-default btn-xs invite-question-item-btn disabled" data-question_id='+question_id+'   data-user_id="'+item.id+'">已邀请</button>';
                            }else{
                                inviteItemHtml += '<button type="button" class="btn btn-default btn-xs invite-question-item-btn" data-question_id='+question_id+'  data-user_id="'+item.id+'">邀请回答</button>';
                            }
                            inviteItemHtml += '</div>';
                        });
                    }
                    $("#invite_user_list").html(inviteItemHtml);
                },
                error: function(data){
                    console.log(data);
                    $("#invite_user_list").html('<div class="text-center" id="invite_loading"><p>操作出错</p></div>');

                }
            });
        }

        /*加载已被邀请的用户信息*/
        function loadQuestionInvitedUsers(questionId,type){
            $("#questionInviteUsers").load('/question/'+questionId+'/invitations/'+type);
        }

    </script>
</div>